<template>
<div >
  <welcome />
  <v-container id="index-container">
    <msg v-bind:message="message" />
    <v-dialog eager v-model="DialogOption.show" max-width="290">
      <v-date-picker
        v-show="DialogOption.type == '日期'"
        v-model="picker"
        @click:month="SelectMonth"
        full-width
        light
        color=""
        type="month"
      ></v-date-picker>
      <ColorfulChip v-show="DialogOption.type == '分类'" :typeInfo="typeInfo" />
    </v-dialog>
    <v-row class="row">
      <v-col v-show="done_created" :cols="ismobile ? 12 : 8">
        <ArticleList :Data="{ ...ArticleListData, picker }" />
      </v-col>
      <v-col
        v-show="!ismobile && done_created"
        cols="4"
        class="date_picker"
        style="padding-left:1em;padding-top:2em"
      >
        <TypeAndDate :typeInfo="typeInfo" data-trigger class="type-and-date animated fadeInRight" />
      </v-col>
    </v-row>
</v-container>
  </div>
</template>
<script>
import welcome from "~/components/welcome.vue";
import ArticleList from "~/components/ArticleList.vue";
import TypeAndDate from "~/components/TypeAndDate.vue";
import ColorfulChip from "~/components/ColorfulChip.vue";
import msg from "~/components/message.vue";
import Bus from "~/pages/util";
export default {
  name: "index",
  data() {
    return {
      tab: "",
      ArticleListData: {
        baseurl: "/api/article/",
        complexquery_url: "/api/article/complex",
        total: 1,
        page: 0,
        pageSize: 4,
        items: [],
        reloading: false,
        loading:false
      },
      DialogOption: {
        type: "分类",
        show: false
      },
      all_type_info_url: "/api/article/all_type",
      typeInfo: [],
      picker: "",
      message: { show: false, content: "成功", color: "success" },
      // userBaseInfo:'',
      done_created: false,
      scroll_option: {
          duration: 300,
          offset: 0,
          easing: "easeInOutCubic"
      }
    };
  },
  components: {
    ArticleList,
    TypeAndDate,
    msg,
    ColorfulChip,
    welcome
  },
  created() {
    //注册事件
    Bus.$on("onClickChip", this.searchByType);
    Bus.$on("getNextPageArticles", this.getNextPageArticles);
    Bus.$on("onSelectMonth", this.onSelectMonth);
    Bus.$on("search", this.search);
    Bus.$on("refreshArticleList", this.refresh);
    Bus.$on("showFilter", this.showFilter);

    //获取文章信息
    var url = this.ArticleListData.baseurl + "total";
    this.$axios.get(url).then(res => {
      if (res.data.success) {
        this.ArticleListData.total = Number(res.data.other.total);
      }
    });
    this.getNextPageArticles()
    this.getTypesInfo();
  },
  methods: {
      
    getNextPageArticles() {
      if(this.loading) return false
      this.loading = true
      // console.log('getNextPageArticles')
      this.ArticleListData.page += 1;
      // console.log('params %O',{...this.pageInfo,type:this.searchType})
      let params = { date: null, type: this.searchType, params: this.pageInfo };
      // console.log('params %O',params)
      this.$axios
        .get(this.ArticleListData.complexquery_url, params)
        .then(res => {
          if (res.data.success) {
            let articles = res.data.other.article;
            this.ArticleListData.items.push(...articles);
            this.loading=false
          } else {
            this.message = {
              show: true,
              content: "找不到文章:" + res.data.reason,
              color: "false"
            };
          }
        });
    },
    SelectMonth(value) {
      Bus.$emit("onSelectMonth", { value: value, picker: this.picker });
    },
    //日期查询
    onSelectMonth(value) {
      this.ArticleListData.reloading = true;
      this.picker = value.picker;
      let params = {
        params: { date: value.value, need_total: true, ...this.pageFirstInfo }
      };
      this.$axios
        .get(this.ArticleListData.complexquery_url, params)
        .then(res => {
          // console.log("data select");
          this.ArticleListData.page = 1
          this.ArticleListData.total = res.data.other.total;
          this.ArticleListData.items = res.data.other.article;
          this.ArticleListData.reloading = false;
          this.$vuetify.goTo('#index-container', this.scroll_option);
        });
    },
    //获取文章分类信息{类别名称:总数}
    getTypesInfo(creating = true) {
      this.$axios.get(this.all_type_info_url).then(res => {
        this.typeInfo = res.data.other.agg;
        if (creating) {
          this.done_created = true;
        }
      });
    },
    //类型查询
    searchByType(item) {
      this.ArticleListData.reloading = true;
      this.ArticleListData.total = item.count;
      this.$store.commit("setSearchArticleType", item._id);
      this.$axios
        .get(this.ArticleListData.complexquery_url, {
          params: { type: item._id, ...this.pageFirstInfo }
        })
        .then(res => {
          this.ArticleListData.page = 1
          this.ArticleListData.items = res.data.other.article;
          this.ArticleListData.reloading = false;
          this.$vuetify.goTo('#index-container', this.scroll_option);
        });
    },
    showFilter(item) {
      switch (item.title) {
        case "分类": {
          this.DialogOption.type = "分类";
          this.DialogOption.show = true;
          break;
        }
        case "日期": {
          this.DialogOption.type = "日期";
          this.DialogOption.show = true;
          break;
        }
      }
    },
    search(keyword) {
      this.ArticleListData.reloading = true;
      this.$axios
        .get(this.ArticleListData.complexquery_url, {
          params: { keyword: keyword, need_total: true, ...this.pageFirstInfo }
        })
        .then(res => {
          this.ArticleListData.page = 1
          this.ArticleListData.items = res.data.other.article;
          this.ArticleListData.total = res.data.other.total;
          this.ArticleListData.reloading = false;
          this.$vuetify.goTo('#index-container', this.scroll_option);
        });
    }
  },
  mounted(){
    let _this = this
    this.$nextTick(()=>{
        let trigger = new _this.$sr(
              {
                trigger:{
                  toggle:{
                    class:{
                      in:["zoomIn",'animated']
                    }
                  }
                }

              }
            )
            trigger.add('[data-trigger]')
    })
  },
  computed: {
    pageInfo() {
      return {
        pageSize: this.ArticleListData.pageSize,
        page: this.ArticleListData.page
      };
    },
    pageFirstInfo() {
      return { pageSize: this.ArticleListData.pageSize, page: 1 };
    },
    searchType() {
      return this.$store.getters.getSearchArticleType;
    },
    ismobile() {
      return this.$store.getters.getIsMobile;
    },
  },
  beforeRouteLeave(to, from, next) {
    this.date = null;
    this.$store.commit("setSearchArticleType", "total");
    next();
  }
};
</script>
<style lang="less">
.test{
  background: linear-gradient(
#BBDEFB, rgb(241,233,175));
  padding: 0;
}
.type-and-date {
  position: -webkit-sticky;
  position:sticky;
  top:10vh
}
</style>